<template>
  <div>
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-notice-bar
      left-icon="volume-o"
      text="密码长度大于6位小于30位，必须包含大小写字母和数字"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="oldPsd"
        type="password"
        name="oldPsd"
        label="旧密码"
        placeholder="请输入旧密码"
        :rules="[{ required: true, message: '请填写旧密码' }]"
      />
      <van-field
        v-model="newPsd"
        type="password"
        name="newPsd"
        label="新密码"
        placeholder="请填写新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <van-field
        v-model="conformPsd"
        type="password"
        name="conformPsd"
        label="确认密码"
        placeholder="再次确认密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 30px;">
        <van-button round block type="warning" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  name: 'ChangePassword',
  data () {
    return {
      newPsd: '',
      oldPsd: '',
      conformPsd: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>
<style lang="less" scoped>
.van-form{
  margin-top: 20px;
}
</style>
